<template>
  <div>
    <div style="margin-top: 15px;">
      <el-button type="primary" plain @click="addMerchant">增加</el-button>
      <el-input placeholder="请输入内容" v-model="inputCont" class="input-with-select" style="width: 40%">
        <el-button type="primary" slot="append" @click="sole" icon="el-icon-search">搜索</el-button>
      </el-input>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%;padding-bottom: 3px;">
      <el-table-column
        type="index" label="序号">
      </el-table-column>
      <el-table-column
        prop="merchantId"
        label="店铺编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="merchantName"
        label="店铺名称"
        width="150">
      </el-table-column>
      <el-table-column
        prop="merchantAccount"
        label="店铺账号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="shopkeeperName"
        label="店主名称"
        width="150">
      </el-table-column>

      <el-table-column
        prop="merchantKindsId"
        label="主营类目"
        width="150">
      </el-table-column>
      <el-table-column
        prop="merchantKeyword"
        label="关键字"
        width="100">
      </el-table-column>
      <el-table-column
        prop="merchantTypeId"
        label="店铺类型"
        width="50">
        <template slot-scope="scope">
          <span>{{scope.row.merchantStatusId==1?'个体店':'企业店'}}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="merchantScore"
        label="评分"
        width="50">
      </el-table-column>

      <el-table-column
        prop="merchantAttention"
        label="粉丝"
        width="50">
      </el-table-column>
      <el-table-column
        prop="enterTime"
        label="入驻时间"
        width="150">
      </el-table-column>
      <!-- <el-table-column
         prop="checkAdminAccount"
         label="审核人账号"
         width="150">
       </el-table-column>-->
      <!--<el-table-column
        prop="updateBy"
        label="修改人"
        width="100">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="修改时间"
        width="150">
      </el-table-column>-->
      <el-table-column
        prop="merchantStatusId"
        label="店铺状态"
        width="150">
        <template slot-scope="scope">
          <span>{{scope.row.merchantStatusId==0?'未审核':scope.row.merchantStatusId==1?'启用':scope.row.merchantStatusId==2?'停用':scope.row.merchantStatusId==3?"审核成功":scope.row.merchantStatusId==3?"审核失败":"解约"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="380">
        <template slot-scope="scope" >
          <el-button
            size="mini"
            type="danger"
            @click="viewDatails(scope.$index, scope.row)">详情</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleEdit(scope.$index, scope.row)" v-show="scope.row.merchantStatusId != -1">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="statusEdit(scope.$index, scope.row,-1)" v-show="scope.row.merchantStatusId == 1 || scope.row.merchantStatusId ==3" >解约</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="statusEdit(scope.$index, scope.row,2)" v-show="scope.row.merchantStatusId == 1 || scope.row.merchantStatusId == 3" >停用</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="statusEdit(scope.$index, scope.row,1)" v-show="scope.row.merchantStatusId == 2" >启用</el-button>
          <!--  <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="店铺基础信息" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false" width="60%">
      <merchantInfo :ind="ind" :sta="sta" @func="func" :compile="compile"></merchantInfo>
    </el-dialog>
  </div>
</template>

<script>

  import Sortable from "sortablejs"
  import merchantInfo from './MerchantInfo.vue'
  export default {
    /*    name: "dragTabe",*/
    components: {
      merchantInfo
    },
    data () {
      return {
        tableData: [],
        dialogTableVisible: false,
        sta: 1,
        ind: 1,
        compile: false,
        inputCont: ''

      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData(){
        this.$axios.get("http://localhost:8301/merchantAccount/getAllMerchant")
          .then(response => {
            console.log(response.data)
            this.tableData=response.data;
            console.log(this.tableData)
          })

      },
      viewDatails (index,row) {
        console.log(index, row)
        this.dialogTableVisible=true;
      },
      handleEdit (index, row) {
        this.compile=true;
        this.dialogTableVisible=true;
        this.sta=row.merchantStatusId;
        this.ind=row.merchantId;
        console.log(index, row)
      },
      handleDelete (index, row) {
        console.log(index, row)
      },
      func(data){
        this.dialogTableVisible=data;
        this.getData()
      },
      statusEdit(index, row,val){
        this.$axios.put("http://localhost:8301/merchantAccount/updataMerchantStatus",{
          merchantId: row.merchantId,
          merchantStatusId: val
        }).then(response => {
          this.getData();
          this.$message.success("状态修改成功")

        })
      },
      addMerchant(){
        this.$router.replace('/addMerchant')
      },
      sole(){
        alert("-----")
      }
    },

    mounted () {
      let el = document.querySelectorAll(".el-table__body-wrapper > table > tbody")[0]
      this.sortable = Sortable.create(el)
    }
  }
</script>

<style>

  .sortable-ghost{
    opacity: .9;
  }
  .sortable-ghost td{
    border-top: 1px dashed #666666 !important;
    border-bottom: 1px dashed #666666 !important;
    color: #fff!important;
  }
  .sortable-ghost td:first-child{
    border-left: 1px dashed #666666 !important;
  }
  .sortable-ghost td:last-child{
    border-right: 1px dashed #666666 !important;
    border-bottom: 1px dashed #666666 !important;
  }
</style>
<style lang="scss">
  p.dragtabe{
    margin-top: 30px;
  }
</style>
